<template>
    <!-- 关键功能：包装 var-snackbar，支持 v-model:show 与插槽/文本内容 -->
    <var-snackbar v-model:show="internalShow" :type="type" :position="position" :duration="duration">
        <slot>{{ content }}</slot>
    </var-snackbar>
</template>

<script>
export default {
    name: 'Snackbar',
    props: {
        show: { type: Boolean, default: false },
        content: { type: String, default: '' },
        type: { type: String, default: 'success' },
        position: { type: String, default: 'top' },
        duration: { type: Number, default: 3000 }
    },
    emits: ['update:show'],
    data() {
        return {
            // 关键功能：内部状态与外部 v-model 同步
            internalShow: this.show
        }
    },
    watch: {
        show(val) {
            this.internalShow = val
        },
        internalShow(val) {
            if (val !== this.show) this.$emit('update:show', val)
        }
    }
}
</script>

<style scoped></style>